---
id: use-debug-style
title: useDebugStyle
---

`useDebugStyle` generates a style object with a random `backgroundColor` value.

### TypeScript

```typescript
const useDebugStyle: () => ReactNative.StyleProp<ReactNative.ViewStyle> | undefined | null
```

### ReScript

```typescript
let useDebugStyle: unit => option<ReactNative.Style.t>
```

### Basic usage

```jsx live showCode
const DebugText = () => {
  const debugStyle = useDebugStyle()

  return (
    <Box padding={4} style={debugStyle}>
      <Typography variant="body">Debug</Typography>
    </Box>
  )
}

const App = () => {
  return (
    <StacksProvider debug={true}>
      <DebugText />
    </StacksProvider>
  )
}

render(<App />)
```
